<template>
    <div style="overflow-y:scroll;height:100%" >
        <!-- 个人中心 -->
        <div class="top_Content">
            <img :src="bgUrl" alt="" class="top_bg">
            <div class="person_head">
                <div class="head_box" @click="goInfoPage">
                    <img :src="head_portrait" alt="" class="head_img">
                    <img :src="editImg" alt="" class="edit">
                </div>
                <p style="margin-top:10rpx">
                    {{name}}
                </p>

            </div>
        </div>
        <div class="bottom_content">
            <ul>
                <!-- <li v-for="(item,index) in list " :key="index" class="tabcard">
                    <div>
                        <img :src="item.img" alt="">
                    </div>
                    <div>
                        <p class="tabname">{{item.tabName}}</p>
                        <p class="tabtip">{{item.msg}}</p>
                    </div>
                </li> -->
                 <li class="tabcard" @click="goInfoPage">
                    <div>
                        <img :src="personImg" alt="">
                    </div>
                    <div>
                        <p class="tabname">个人资料</p>
                        <p class="tabtip">点击查看</p>
                    </div>
                </li>
                 <li class="tabcard" @click="goRecord">
                    <div>
                        <img :src="listImg" alt="">
                    </div>
                    <div>
                        <p class="tabname">预约记录</p>
                        <p class="tabtip">{{apt_total}}条</p>
                    </div>
                </li>
                 <li class="tabcard" @click="goMsg">
                    <div>
                        <img :src="noticeImg" alt="">
                    </div>
                    <div>
                        <p class="tabname">消息提醒</p>
                        <p class="tabtip">{{msgTip}}</p>
                    </div>
                </li>
                 <li class="tabcard" @click="toQua">
                    <div>
                        <img :src="realImg" alt="">
                    </div>
                    <div>
                        <p class="tabname">实名认证</p>
                        <p class="tabtip">{{status}}</p>
                    </div>
                </li>
                <!-- <li class="tabcard" @click="updatePwd">
                    <div>
                        <img :src="pwdImg" alt="">
                    </div>
                    <div>
                        <p class="tabname">修改密码</p>
                        <p class="tabtip">点击修改</p>
                    </div>
                </li> -->
                <li class="tabcard" @click="cancat">
                   <div>
                       <img :src="concatImg" alt="">
                   </div>
                   <div>
                       <p class="tabname">常用就诊人</p>
                       <p class="tabtip">点击查看</p>
                   </div>
               </li>
               <li class="tabcard" @click="goInvoice">
                    <div>
                        <img :src="invoiceImg" alt="">
                    </div>
                    <div>
                        <p class="tabname">电子票据</p>
                        <p class="tabtip">点击查看</p>
                    </div>
                </li>
                <li class="tabcard" @click="goPrescriptionOrder">
                    <div>
                        <img :src="orderImg" alt="">
                    </div>
                    <div>
                        <p class="tabname">诊疗订单</p>
                        <p class="tabtip">点击查看</p>
                    </div>
                </li>
                <li class="tabcard" @click="history">
                    <div>
                        <img :src="historyImg" alt="">
                    </div>
                    <div>
                        <p class="tabname">历史服务</p>
                        <p class="tabtip">聊天历史</p>
                    </div>
                </li>
                <li class="tabcard" @click="recordCopy">
                    <div>
                        <img :src="recordCopyImg" alt="">
                    </div>
                    <div>
                        <p class="tabname">病案复印</p>
                        <p class="tabtip">点击查看</p>
                    </div>
                </li>
                <li class="tabcard" @click="toAddressManage">
                    <div>
                        <img :src="addressImg" alt="">
                    </div>
                    <div>
                        <p class="tabname">地址管理</p>
                        <p class="tabtip">点击查看</p>
                    </div>
                </li>
                <li class="tabcard" @click="toGetHelp">
                    <div>
                        <img :src="helpImg" alt="">
                    </div>
                    <div>
                        <p class="tabname">帮助与反馈</p>
                        <p class="tabtip">点击查看</p>
                    </div>
                </li>
            </ul>
        </div>
         <!-- <i-modal  :visible="visible" @ok="toQua" @cancel="visible=false">
            <view style='padding-top:50rpx'>请完成实名认证，实名认证之后</view>
            <view style="padding-bottom:50rpx">可正常使用本软件所有功能</view>
        </i-modal> -->
        <div class="modal" v-if="visible">
            <div class="out">
                <div class="top" >
                    <span>请完成资质认证,认证之后可正常使用本软件所有功能</span>
                </div>
                <div class="btm">
                    <span @click='visible=false'>取消</span>
                    <span @click="toQua">确定</span>
                </div>
            </div>

        </div>
    </div>
</template>
<script>
let app = getApp()
let store = app.store
import nim from '@/utils/nim'
import api from '@/api/api'
import * as types from '@/store/types'
import { mapState } from 'vuex'
export default {
    computed: {
      ...mapState([
        'loginStatus', 'sessionsList'
      ])
    },
    data(){
        return{
            recordCopy_flag:true,
            recordCopyImg:'',
            imgUrl: '',
            editImg: '',
            bgUrl:'',
            personImg: '',
            listImg: '',
            realImg: '',
            pwdImg: '',
            noticeImg: '',
            historyImg:"",
            invoiceImg:"",
            orderImg:"",
            concatImg:"",
            helpImg:"",
            addressImg: "",
            list:[
                {
                    tabName:'个人资料',
                    msg:'点击查看',
                    img: this.personImg
                },
                {
                    tabName:'预约记录',
                    msg:this.apt_total+'条',
                    img: this.listImg
                },
                {
                    tabName:'消息提醒',
                    msg:'有未读消息',
                    img: this.noticeImg
                },
                {
                    tabName:'实名认证',
                    msg:'未认证',
                    img: this.realImg
                },
                {
                    tabName:'修改密码',
                    msg:'点击修改',
                    img: this.pwdImg
                },
            ],
            msgTip:'',
            apt_total:0,
            status:'',
            head_portrait:'',
            name:'',
            visible:false,
            ongoingList: [] //正在进行问诊中的订单
        }
    },
    onUnload(){
        // wx.redirectTo({url: '/pages/index/main'})
    },
    async onShow(){
        this.visible = false
        await this.getOngingApointment()
        this.getTotal()
    },
    mounted(){
      this.imgUrl = api.imgUrl
      this.bgUrl = this.imgUrl+'person_center.png'
      this.editImg = this.imgUrl + 'edit.png'
      this.personImg = this.imgUrl + 'person.png'
      this.listImg = this.imgUrl + 'list.png'
      this.realImg = this.imgUrl + 'real.png'
      this.pwdImg = this.imgUrl + 'pwd.png'
      this.noticeImg = this.imgUrl + 'notice.png'
      this.historyImg = this.imgUrl +'history.png'
      this.orderImg = this.imgUrl +'order.png'
      this.concatImg = this.imgUrl + 'concat.png'
      this.helpImg = this.imgUrl + 'help.png'
      this.addressImg = this.imgUrl + 'addressImg.png'
      this.invoiceImg = this.imgUrl + 'invoiceImg.png'
      this.recordCopyImg = this.imgUrl + 'recordCopy.png'
    //   this.getTotal()
      // 清空正在聊天的对象
      store.dispatch({
        type: 'CurrentChatTo_Change',
        payload: ''
      })
        // let info = this.$storage.getWxInfo()
        // console.log('info',info)
        // this.head_portrait = info.avatarUrl
    },
    methods: {
        // 病案复印
    recordCopy(){
        let that=this
        if(!that.recordCopy_flag){
            return
        }
        that.recordCopy_flag=false
        let invoke="medicalRecordMailSend"
        let params = {
            orgCode:"42000023-4",
        }
        wx.navigateToMiniProgram({
            appId: 'wx4b75b7ceaffc7eab',
            path: `/pages/middlePage/jumpView/jumpView?invoke=${invoke}&params=${JSON.stringify(params)}`,
            envVersion: 'trial',// 打开体验版
            success(res) {
              that.recordCopy_flag=true
              // storage.setDeptId()
            },
            complete(err){
              that.recordCopy_flag=true
            }
         })
    },
      goPrescriptionOrder () {
        let that = this
        if (that.status === '未认证') {
            that.visible = true
            return
        }
        this.$router.push('/pages/center/child/prescriptionOrder/main')
      },
      history () {
        this.$router.push('/pages/center/child/history/main')
      },
      goInfoPage () {
        this.$router.push('/pages/center/child/userInfo/main')
      },
      goRecord () {
        this.$router.push('/pages/center/child/appointmentRecord/main')
      },
      cancat(){
          if( this.status == '未认证'){
              this.visible = true
          }else{
              this.$router.push('/pages/center/child/commonList/main')
          }

      },
      goMsg () {
        // this.$utils.showToast('text', '正在建设中...')
        this.$router.push('/pages/center/child/msgManage/main')
      },
      goInvoice() {
        this.$router.push('/pages/center/child/eInvoice/main')
      },
      // 判断im返回的未读消息中是否为当前的订单
      judgeUnread(list,id) {
        let judge = false ;
        list.forEach(ele=>{
          if(ele.apt_id === id) {
            judge = true;
            return
          }
        })
        return judge
      },
        // 正在进行问诊中的订单
      getOngingApointment() {
        this.$api.ongoingAppointment({ page: 1, rows: 20 },{ showLoading: false }).then(res=>{
            this.ongoingList = res.data
        })
      },
      getTotal(){
            var that = this
            that.$api.get_user_info('', {'showLoading': true}).then(function (data) {
                // console.log(data.data[0].isreal)
                let accountInfo = data.data[0]
                if (accountInfo.netease_token) {
                  nim.login(accountInfo)
                }
                if(data.data[0].isreal == 0){
                    that.status = '未认证'
                }else if(data.data[0].isreal == 1){
                    that.status = '已认证'
                }
                // console.log('  that.status ',  that.status )
                that.head_portrait = data.data[0].head_portrait
                accountInfo.headImg = data.data[0].head_portrait
                that.$storage.setAccountInfo(accountInfo)
                that.name = data.data[0].patient_name==null?"":data.data[0].patient_name
           }).then(() => {
             that.$api.user_statistics('', {'showLoading': true}).then(function (res) {
                 var total = res.data.msg_total*1
                 // 等待IM消息更新
                 setTimeout(() => {
                     if(res.data.apt_total){
                        that.apt_total = res.data.apt_total
                        total = res.data.msg_total*1
                        for (let i = 0; i < that.sessionsList.length; i++) {
                            if (that.sessionsList[i].unread > 0 && that.judgeUnread(that.ongoingList,JSON.parse(that.sessionsList[i].lastMsg.custom).aptId) ) {
                            total += that.sessionsList[i].unread*1
                            }
                        }
                        //    total = res.data.msg_total*1 + num *1
                        console.log(that.sessionsList,total,'total')
                    }else{
                        that.apt_total = 0
                    }
                    if (total>0) {
                        that.msgTip = total + '条未读消息'
                    } else {
                        that.msgTip = '暂无未读消息'
                    }
                 }, 800);
             })
           })
      },
      updatePwd(){
            this.$router.push('/pages/resetPwd/main')
      },
      toQua(){
            this.$router.push('/pages/qualification/main')
      },
      toGetHelp() {
        this.$router.push('/pages/center/child/getHelp/main')
      },
      toAddressManage() {
        // this.$router.push('/pages/center/child/storeAddress/main')
        this.$router.push('/pages/center/child/addressManage/main')
      }
    }
}
</script>
<style lang="less" scoped>
.top_Content{
    width: 100%;
    height: 411rpx;
    position: relative;
    .top_bg{
        width: 100%;
        height: 411rpx;
    }
    .person_head{
        // width: 150rpx;
        width:100%;
        height: 200rpx;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        text-align: center;
        font-size:32rpx;
        line-height: 45rpx;
        font-weight:500;
        color:rgba(255,255,255,1);
    }
    .head_box{
        width: 148rpx;
        height: 148rpx;
        margin: auto;
        border:2px solid #fff;
        border-radius: 50%;
    }
    .head_img{
        width: 147rpx;
        height: 147rpx;
          margin: auto;
        border-radius: 50%
    }
    .edit{
        width: 50rpx;
        height: 50rpx;
        position: absolute;
        left: 55%;
        top: 110rpx;
    }
}
.bottom_content{
    width: 100%;
    margin-top: 20rpx;
    ul{
        width: 100%;
        // margin: 0 20rpx;
        display: flex;
        justify-content: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .tabcard{
        width:332rpx;
        height:195rpx;
        margin: 15rpx 20rpx;
        background:rgba(255,255,255,1);
        box-shadow:0px 2px 10rpx 0px rgba(0,0,0,0.13);
        border-radius:16rpx;
        display: flex;
        flex-direction: row;
        // justify-content: center;
        align-items: center;
        padding-left: 30rpx;
        box-sizing: border-box;
        img{
            width: 80rpx;
            height: 80rpx;
            margin-right: 20rpx;
        }
        .tabname{
            font-size:34rpx;
            color:rgba(51,51,51,1);
            line-height:48rpx;
        }
        .tabtip{
            font-size:28rpx;
            color:rgba(153,153,153,1);
            line-height:40rpx;
        }
    }
}
  .modal {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0,0,0,.7);
    opacity: 1;
    z-index: 100;
    .out {
      height: 412rpx;
      border-radius: 15rpx;
      width: 650rpx;
      background: #fff;
      z-index: 999;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-top: -206rpx;
      margin-left: -325rpx;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .top {
        flex: 1;
        padding: 110rpx 48rpx 0 48rpx;
        text-align: center;
        span {
          font-size: 34rpx;
          font-family:PingFangSC-Regular,PingFangSC;
          font-weight:400;
          line-height:48rpx;
        }
      }
      .btm {
        height: 100rpx;
        line-height: 100rpx;
        display: flex;
        font-size:34rpx;
        font-family:PingFangSC-Regular,PingFangSC;
        font-weight:400;
        .sure {
          background: #4A64EA;
          color: #fff;
        }
        span {
          flex: 1;
          text-align: center;
        }
        span:nth-child(1) {
          background: #f9f9f9;
        }
        span:nth-child(2) {
          background: #4A64EA;
          color: #fff;
        }
      }
    }
  }
</style>
